<template>
   <div class="overviewPage" v-if="tabVer">
        <q-tabs
          v-model="stab"
          dense
          class="subTab"
          active-color="white"
          active-bg-color="purple-10"
          indicator-color="white"
          align="justify"
        >
          <!-- 工单概览 1 -->
          <q-tab name="wod1" class="sqtab">
            <img src="../../assets/icons/book-wh.svg" class="subTapSVG"/>
          </q-tab>

          <q-separator color="white" vertical inset />

          <!-- 工单概览 2 -->
          <q-tab name="wod2" class="sqtab">
            <img src="../../assets/icons/stamp-wh.svg" class="subTapSVG"/>
          </q-tab>

          <q-separator color="white" vertical inset />

          <!-- 工单概览 3 -->
          <q-tab name="wod3" class="sqtab">
            <img src="../../assets/icons/info-wh.svg" class="subTapSVG"/>
          </q-tab>

          <q-separator color="white" vertical inset />

          <!-- 工单概览 4 -->
          <q-tab name="wod4" class="sqtab">
            <img src="../../assets/icons/user-wh.svg" class="subTapSVG"/>
          </q-tab>

        </q-tabs>

        <q-tab-panels v-model="stab" animated class="nobgcolor">
          <q-tab-panel name="wod1">
            <StatusBar @switchTab="switchToWot"></StatusBar>
            <Tab1Page></Tab1Page>
          </q-tab-panel>

          <q-tab-panel name="wod2">
            <Tab2Page></Tab2Page>
          </q-tab-panel>

          <q-tab-panel name="wod3">
            <Tab3Page></Tab3Page>
          </q-tab-panel>

          <q-tab-panel name="wod4">
            <Tab4Page></Tab4Page>
          </q-tab-panel>
        </q-tab-panels>
    </div>
    <div v-else class="overviewPage">
      <div class="row">
        <StatusBar @switchTab="switchToWot"></StatusBar>
      </div>
      <div class="row tabRow">
        <div class="col tablet-tab"><Tab1Page></Tab1Page></div>
        <div class="col tablet-tab"><Tab2Page></Tab2Page></div>
      </div>
      <div class="row tabRow">
        <div class="col tablet-tab"><Tab3Page></Tab3Page></div>
        <div class="col tablet-tab"><Tab4Page></Tab4Page></div>
      </div>
    </div>

</template>

<script setup>
import { ref } from 'vue'
import Tab1Page from 'src/pages/WOdetails/overviewPages/Tab1Page.vue'
import Tab2Page from 'src/pages/WOdetails/overviewPages/Tab2Page.vue'
import Tab3Page from 'src/pages/WOdetails/overviewPages/Tab3Page.vue'
import Tab4Page from 'src/pages/WOdetails/overviewPages/Tab4Page.vue'
import StatusBar from 'src/components/StatusBar.vue'

const stab = ref('wod1')
const tabVer = ref(true)
const emit = defineEmits(['switchTabWot'])
// emit('switchTabWot')

window.addEventListener('resize', checkScreenSize, false)

function checkScreenSize () {
  if (window.innerWidth < 800) {
    tabVer.value = true
  } else {
    tabVer.value = false
  }
}
checkScreenSize()

const switchToWot = () => {
  emit('switchTabWot')
}

</script>

<style lang="scss" scoped>
  .overviewPage{
    overflow-x: hidden;
    overflow-y: auto;
  }
    .sqtab{
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .nobgcolor{
        background-color: rgba(255, 255, 255, 0);
    }

    .subTab{
        background-color: #9F99DB;
    }

    .subTapSVG{
      height: 1.8rem;
      @media (max-width:480px){
        height: 1.5rem;
      }
    }

</style>
